<template>
  <div>
    <vxe-toolbar id="toolbarId" :setting="{storage: true}" export :refresh="{query: findList}">
      <template v-slot:buttons>
        <el-button @click="findList">查询</el-button>
        <el-button @click="funcAdd">新增</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      class="mytable-footer"
      height="700"
      :data="tableData"
      remote-sort
      :loading="loading"
      @sort-change="sortList"
    >
      <!--show-footer
      :footer-method="footerMethod"
      -->
      <vxe-table-column>
        <vxe-table-column field="title" title="标题" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.title" placeholder="请输入内容" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="type" title="类型" min-width="100" sortable>
          <template v-slot="{row}">{{ dicts.siteDeploy[row.type] }}</template>
        </vxe-table-column>
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.type" clearable placeholder="请选择">
            <el-option v-for="(v,k) in dicts.siteDeploy" :key="k" :label="v" :value="k" />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="idx" title="排序号" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.idx" placeholder="排序号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column field="img" title="图片" min-width="100" sortable>
        <template v-slot="{row}">
          <img :src="row.img" height="30px" />
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right" width="130">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="详情" placement="top">
            <vxe-button type="text" @click="funcDetail(scope.row.code)">
              <i class="el-icon-document" />
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <vxe-button type="text" @click="funcEdit(scope.row.code)">
              <i class="el-icon-edit" />
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <vxe-button type="text" @click="funcDelete(scope.row.code)">
              <i class="el-icon-delete" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />

    <vxe-modal v-model="modelAddFlag" title="新增" width="600" height="680" resize>
      <compAdd ref="addRef" @fatherAddMethod="fatherAdd" @fatherCancelMethod="fatherCancel" />
    </vxe-modal>
    <vxe-modal v-model="modelEditFlag" title="编辑" width="600" height="680" resize>
      <compEdit ref="editRef" @fatherEditMethod="fatherEdit" @fatherCancelMethod="fatherCancel" />
    </vxe-modal>
    <vxe-modal v-model="modelDetailFlag" title="详情" width="600" height="600" resize>
      <compDetail ref="detailRef" />
    </vxe-modal>
  </div>
</template>
<script>
  import Vue from "vue";
  import "xe-utils";
  import VXETable from "vxe-table";
  import "vxe-table/lib/index.css";
  import XEUtils from "xe-utils";
  import VXEUtils from "vxe-utils";

  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ["cookie"] });
  import compAdd from "./components/siteDeployAdd.vue";
  import compEdit from "./components/siteDeployEdit.vue";
  import compDetail from "./components/siteDeployDetail.vue";
  import request from "@/utils/request";
  import { getDictByType } from "@/api/commonApi";

  export default {
    name: "siteDeployList",
    components: {
      compAdd,
      compEdit,
      compDetail
    },
    data() {
      return {
        message: "",
        loading: false,
        tableData: [],
        modelAddFlag: false,
        modelEditFlag: false,
        modelDetailFlag: false,
        copy: false,
        listQuery: {
          code: "",
          branchCode: "",
          title: "",
          img: "",
          type: "",
          idx: "",
          url: "",
          status: "",
          pageNum: 1,
          pageSize: 10,
          sortField: "",
          sortType: "",
          total: 0
        }
      };
    },
    async created() {
      this.dicts = { siteDeploy: {} };
      this.dicts = await getDictByType("siteDeploy");
      this.findList();
    },
    methods: {
      findList() {
        this.loading = true;
        return new Promise(resolve => {
          request({
            url: "/arpa-basic-api/siteDeploy",
            method: "get",
            params: this.listQuery
          }).then(response => {
            this.tableData = response.data.records;
            this.listQuery.total = response.data.total;
            this.loading = false;
            resolve();
          });
        });
      },
      // 排序
      sortList({ column, property, order }) {
        if (order) {
          this.listQuery.sortField = property;
          this.listQuery.sortType = order;
        } else {
          this.listQuery.sortField = "";
        }
        this.findList();
      },
      // 添加方法
      funcAdd() {
        this.$refs.addRef.init(this.dicts);
        this.modelAddFlag = true;
      },
      // 修改方法
      funcEdit(code) {
        this.$refs.editRef.getInfo(code, this.dicts);
        this.modelEditFlag = true;
      },
      // 详情方法
      funcDetail(code) {
        this.$refs.detailRef.getInfo(code, this.dicts);
        this.modelDetailFlag = true;
      },
      // 删除方法
      funcDelete(row) {
        this.$confirm("确认删除吗？")
          .then(_ => {
            request({
              url: `/arpa-basic-api/siteDeploy`,
              method: "delete",
              params: { codes: row }
            }).then(response => {
              this.$message({ message: response.msg, type: "success" });
              this.findList();
            });
          })
          .catch(_ => {});
      },
      // 增加组件的父方法
      fatherAdd() {
        this.modelAddFlag = false;
        this.findList();
      },
      // 编辑组件的父方法
      fatherEdit() {
        this.modelEditFlag = false;
        this.findList();
      },
      // 公共取消
      fatherCancel(modelFlag) {
        switch (modelFlag) {
          case "add":
            this.modelAddFlag = false;
            break;
          case "edit":
            this.modelEditFlag = false;
            break;
          case "detail":
            this.modelDetailFlag = false;
            break;
          default:
        }
      },
      // 分页handle
      handlePageChange({ currentPage, pageSize }) {
        this.listQuery.pageNum = currentPage;
        this.listQuery.pageSize = pageSize;
        this.findList();
      },
      // 底部颜色设置
      /*     footerCellClassName({ $rowIndex, column, columnIndex }) {
        if (columnIndex === 0) {
          if ($rowIndex === 0) {
            return 'col-blue'
          } else {
            return 'col-red'
          }
        }
      }, */
      // 设置底部合计
      footerMethod({ columns, data }) {
        return [
          columns.map((column, columnIndex) => {
            if (columnIndex === 0) {
              return "合计";
            }
            if (["pageviews", "forecast"].includes(column.property)) {
              return XEUtils.sum(data, column.property);
            }
            return null;
          })
        ];
      }
    }
  };
</script>

<style>
  .vxe-table .vxe-body--column:not(.col--ellipsis),
  .vxe-table .vxe-footer--column:not(.col--ellipsis),
  .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }
  .vxe-toolbar {
    padding: 0 0 10px 0;
  }
</style>
